<template>
  <div class="text_dialog">
    <textDialog width="45%">
      <!-- 头部 -->
      <template #header>
        <header>
          <el-form :inline="true" ref="formRef" :model="params" class="demo-form-inline" >
        <el-form-item
          label="题库名称"
          prop="title"
          :rules="[{ required: true, message: '请输入题库名称' }]"
        >
          <el-input v-model="params.title" placeholder="请输入题库名称" />
        </el-form-item>
        <el-form-item label="被他人使用" class="radio">
          <el-radio-group v-model="params.isshow">
            <el-radio label="1" size="large">允许所有老师使用</el-radio>
            <el-radio label="2" size="large">不允许任何老师使用</el-radio>
             <el-badge :value="params.limits.length" type="primary" style="margin-top:11px" class="ding" v-if="params.limits.length>0">
             </el-badge>
             <el-radio label="3" size="large" @change="portion">允许部分老师使用</el-radio>
          </el-radio-group>
        </el-form-item>
        </el-form>
        </header>
      </template>

      <!-- 内容 -->
      <template #content>
        <!-- 允许部分老师使用弹框 -->
        <transferBase v-show="dialogStore.show && dialogStore.type === 'text'" @addSelected="addSelected"></transferBase>
      </template>

      <template #footer>
              <el-button @click="show = false">取消</el-button>
              <el-button type="primary" @click="DataAdd">
                  确定
              </el-button>
          </template>
    </textDialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, watch } from "vue";
import textDialog from './textDialog.vue'
import { useDialogStore } from '../../store/dialog';
import transferBase from '../transferBase/transferBase.vue'
import { ElMessage } from 'element-plus'
import {databaseAdd} from '../../api/subjects'

const dialogStore = useDialogStore()
const { type, show, title } = toRefs(dialogStore)
const data = reactive({
  params:{
      id: 0,
      // 题库名称
      title: "",
      // 单选框
      isshow: '1',
      limits:[]
  },
  formRef:null
});
const { formRef,params}:any = toRefs(data);

// 允许部分老师使用弹框
const portion = ()=>{
  dialogStore.$patch(state=>{
    state.title='可见老师'
    state.type='text'
    state.show=true
  })
}

const addSelected = ()=>{
  dialogStore.$patch(state=>{
    state.show=false
  })
}

// 题库添加
const DataAdd=async ()=>{
  const res:any =await databaseAdd(params.value)
  console.log(res);
  if(res.errCode==10000){
    ElMessage.success('添加成功')
    show.value=false
  }else{
    ElMessage.error(res.errMsg)
  }
}
</script>

<style lang="less" scoped>
  header{
    padding: 15px 100px;
  }
</style>